<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <link rel="stylesheet" type="text/css" href="/static/base/common/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css"/>
    <script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
    <title>网格员分布</title>
    <style>
        body,html{
            position:relative;
            height:100%;
        }
        .content{
            margin-top:1%;
            height:85%;
        }
        .content-map{
            overflow:hidden;
        }
        #map{
            border:1px solid #c2c2c2;
            width:100%;
            height:100%;
            }
        <%--百度地图取消显示logo--%>
        .BMap_cpyCtrl {display: none;}
        .anchorBL {display: none;}

        /*地点信息展示*/
        .content-location #location{
            height:600px;
            overflow-x: hidden;
            overflow-y:scroll;
            border:1px solid #c2c2c2;
            margin:0px 15px;
        }
        .content-location #location ul li{
            text-align: center;
            padding:15px 10px;
        }
        .content-location #location ul li a:focus{
            color:rgb(110,198,115);
        }
        button{
            border: 0px;
            background-color: white;
        }
        a:visited,a:hover,a:focus{
            text-decoration: none;
        }



        /*滚动条样式设置*/
        .content-location .layui-nav .layui-nav-item .layui-nav-child::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .content-location .layui-nav .layui-nav-item .layui-nav-child::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;     -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
            background: rgba(0,0,255,0);
        }
        .content-location .layui-nav .layui-nav-item .layui-nav-child::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
            border-radius: 0;
            background: rgba(0,0,255,0);
        }

        .search{
            padding-top:15px ;
        }
        .search button{
            background-color:rgb(59,159,225);
        }






    </style>
</head>

<body>
<div id="saper-container" style="height:100%;">
    <div id="saper-hd"></div>
    <div id="saper-bd" style="height:100%;">
        <div class="subfiled clearfix">
            <h2>网格人员分布</h2>
        </div>
        <div class="search layui-form" >
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">搜索城镇</label>
                    <div class="layui-input-inline">
                        <select name="modules" lay-verify="required" lay-search="">
                            <option value="">直接选择或搜索选择</option>
                            <c:forEach items="${list}" var="item">
                                <option value="${item.lng},${item.lat},${item.townName}">${item.townName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <button class="layui-btn" lay-submit lay-filter="form">搜索</button>
                </div>
            </div>
        </div>
        <div class="layui-row content">
            <div id="map" ></div>
        </div>


    </div>
    <div id="saper-ft"></div>
</div>
</body>
<script type="text/javascript" src="/static/webjars/layui/layui.js"></script>
<script type="text/javascript">

    //创建地图
    var map = new BMap.Map("map");         // 创建地图实例
    var point = new BMap.Point(105.245851,28.310923);    // 创建点坐标
    map.centerAndZoom(point, 11);                   // 设置缩放度
    map.enableScrollWheelZoom();                  //启用滚轮放大缩小
    window.map = map ;                          //全局变量



    // 编写自定义函数,创建标注
    function addMarker(pt,num){
        var marker = new BMap.Marker(pt);
        map.addOverlay(marker);
        marker.addEventListener("click",function(){
            showInfo(this,num);
        });
    }
    function  showInfo(mark,msg){
        window.location.href="/command/scatter_detail?id="+msg;
    }
    //异步请求并显示所有数据 并添加点击事件
    $.getJSON("/ajax/commandajax/grid_all",function(data){
        data.forEach(function(item){
            var pt = new BMap.Point(item.lng,item.lat);
            addMarker(pt,item.userId);
        });
    });


    /*划分行政区*/
    function getBoundary(posiName){
        var bdary = new BMap.Boundary();
        bdary.get(posiName,function(rs){       //获取行政区域
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return ;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, fillColor:"rgba(255,255,255,0)",strokeColor: "#ff0000"}); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }

        });
    }

    layui.use('form',function(){
        var form = layui.form;
        //监听提交
        form.on('submit(form)', function(data){
            var posi = data.field.modules.split(",");
            try {
                var pt = new BMap.Point(Number(posi[0]),Number(posi[1]));
                map.panTo(pt); //转到该点位置
                getBoundary("宜宾市兴文县");
                map.setZoom(14);
            }catch (e) {
                console.log(e);
            }
            return true;
        });
    });


</script>
</html>